<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:sendMessage
     -->
    <div class="QS-content-template QS-sendMessage">
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">短信模板号</span>
            <div class="makeFoods_input">
                <el-select v-model="modalValue" placeholder="请选择">
                    <el-option
                        v-for="item in modalOption"
                        :key="item.value"
                        :label="item.value"
                        :value="item.key">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">短信签名</span>
            <div class="makeFoods_input">
                <el-select v-model="messageValue" placeholder="请选择">
                    <el-option
                        v-for="item in messageOption"
                        :key="item.value"
                        :label="item.value"
                        :value="item.key">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">是否单个手机号发送</span>
            <div class="makeFoods_input">
                <el-radio-group @change="alonePhoneChange" v-model="isSendOneCustomer">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="makeFoods_label" v-show="alonePhoneFlag">
            <span class="makeFoods_label_tip">手机号</span>
            <div class="makeFoods_input">
                <el-input v-model="phone" maxlength="11" placeholder="请输入手机号"></el-input>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip"></span>
            <div class="makeFoods_input">
                <p class="send_message_warn" style="font-size:14px;color:#f00;">
                    为是时，发送至填写手机上，为否时，发送全量用户
                </p>
            </div>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip">模板是否含有变量</span>
            <div class="makeFoods_input">
                <el-radio-group @change="modalChange" v-model="isHasVariable">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </div>
        </div>
        <!-- 配餐主料 -->
        <div v-show="modalFlag" v-for="(item,index) in variableOptions" :key="'code'+index" class="makeFoods_label">
            <span class="makeFoods_label_tip">变量名</span>
            <div class="makeFoods_input">
                <!-- <el-input 
                    v-model="item.code"
                    placeholder="请输入变量名"
                    clearable
                ></el-input> -->
                <el-select 
                    v-model="item.code"  
                    @change="variableNameChange(index,item)"
                    placeholder="请选择">
                    <el-option
                        v-for="itemName in variableName"
                        :key="'choose'+itemName.value"
                        :label="itemName.value"
                        :value="itemName.key">
                    </el-option>
                </el-select>
            </div>
            <span class="makeFoods_label_tip">变量值</span>
            <div class="makeFoods_input_small">
                <el-input 
                    v-model="item.value"
                    placeholder="请输入变量值"
                    clearable
                ></el-input>
            </div>
            <i @click="delVariableOptions(index)" v-show="item.iconFlag" class="el-icon-delete add_foods_del"></i>
            <i v-show="!item.iconFlag" class="add_foods_del add_foods_del_station"></i>
        </div>
        <div class="makeFoods_label">
            <span class="makeFoods_label_tip"></span>
            <div class="makeFoods_input">
                <p class="send_message_warn" style="font-size:14px;color:#f00;">
                    为是时，发送选填内容，为否时，发送默认模板内容
                </p>
            </div>
        </div>
        <div v-show="modalFlag" class="makeFoods_label_add">
            <i @click="addVariableOptions" class="el-icon-circle-plus-outline add_foods_icon"></i>
        </div>
        <div class="send_btn">
            <el-button @click="restData">重置</el-button>
            <el-button @click="sendMessageBtn" type="primary">发送</el-button>
        </div>
    </div>
</template>

<script>
import {Toast} from 'vant';
export default {
	components: {
	
	},
	data(){
		return {
            modalOption:[
                {
                    key:'SMS_199285135',
                    value:'SMS_199285135'
                },
            ],
            modalValue:'SMS_199285135',
            messageOption:[
                {
                    key:'羽变Club',
                    value:'羽变Club'
                },
            ],
            messageValue:'羽变Club',
            isSendOneCustomer:'Y',
            alonePhoneFlag:true,
            phone:'',
            isHasVariable:'Y',
            modalFlag:true,
            variableOptions:[{//变量数组
                code:'',//变量名称
                value:'',//变量值
                iconFlag:false,//删除按钮显隐
            }],
            variableName:[//变量名 - 选择
                {
                    key:'code',
                    value:'code'
                },
                {
                    key:'value',
                    value:'value'
                },
            ],
            variableVal:''
		}
    },
    mounted(){
        // this.sendMessage();
    },
    methods:{
        sendMessageBtn(){
            if(this.isSendOneCustomer == 'Y'){
                if(this.phone == '' || this.phone.length != 11){
                    Toast('请输入正确手机号');
                    return;

                }
            }else{
                this.phone = '';
            }
            if(this.isHasVariable == 'Y'){
                if(this.variableOptions.length == 0 || this.variableOptions[0].code == ''){
                    Toast('请输入变量名及变量值');
                    return;
                }else{
                    var variable = {};
                    for(var i = 0;i < this.variableOptions.length;i ++){
                        variable[this.variableOptions[i].code] = this.variableOptions[i].value;
                    }
                    this.variableVal = JSON.stringify(variable);
                    console.log('_variable',this.variableVal)
                }
            }else{
                this.variableVal = '';
            }
            this.sendMessage();
        },
        sendMessage(){
            // return;
            var _data = {
                templateCode:this.modalValue || 'SMS_199285135',//短信模板号
                signName:this.messageValue || "羽变Club",//短信签名
                isSendOneCustomer:this.isSendOneCustomer || "Y",//是否单个手机号发送
                phone:this.phone || "",//是 - 填写手机号，否 - 全部发送
                isHasVariable:this.isHasVariable || "Y",//模板是否含有变量
                variable:this.variableVal,//是 - 显示，并添加 变量名 - 变量值
            //     variable:"{\"code\":\"123456\"}",//是 - 显示，并添加 变量名 - 变量值
            };
            console.log('_data===',_data)
            // return;
            this.$post("sendMessage/send",_data).then(res=>{
                console.log(res)
                
            })
        },
        restData(){
            this.modalValue = 'SMS_199285135';
            this.messageValue = '羽变Club';
            this.isSendOneCustomer = 'Y';
            this.phone = '';
            this.isHasVariable = 'Y';
            this.variableOptions = [{
                code:'',//变量名称
                value:'',//变量值
            }];

            this.alonePhoneFlag = true;
            this.modalFlag = true;
        },
        // this.$router.push('/GDPLHasReturned');
        addVariableOptions(){//
            this.variableOptions.push({
                code:'',//变量名称
                value:'',//变量值
                iconFlag:true,//删除按钮显隐
            });
        },
        delVariableOptions(index){//删除用料
            this.variableOptions.splice(index,1);
        },
        variableNameChange(index,item){
            console.log('index',index)
            // console.log('value',value)
            console.log('target',item)
            console.log('target',this.variableOptions)
        },
        alonePhoneChange(){
            console.log('isSendOneCustomer===',this.isSendOneCustomer);
            if(this.isSendOneCustomer == 'Y'){
                this.alonePhoneFlag = true;
            }else{
                this.alonePhoneFlag = false;
                this.phone = '';
            }
        },
        modalChange(){
            if(this.isHasVariable == 'Y'){
                this.modalFlag = true;
            }else{
                this.modalFlag = false;
                this.variableOptions = [{
                code:'',//变量名称
                value:'',//变量值
            }];
            }
        }
    }
}
</script>
<style>
.send_btn{
    text-align: center;
}
</style>